<template>
    <el-container class="theme-container">
        <el-header class="theme-header">主题公园</el-header>
        <div class="custom-style-editor" :style="{ 'color': themeFontColor, 'background-color': themeContainerColor }">
            <el-row>
                <el-col :span="12" style="background-color: white;">
                    <div class="theme-title" style="color: black;">浅色模式</div>
                    <el-card class="editor-section"  shadow="never" style="color: black;" :style="{'background-color': themeColor }">
                        <div class="color-show">
                            <span>主题配色</span>
                            <el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker">
                            </el-color-picker>
                        </div>
                        <div class="color-show">
                            <span>本人聊天框</span>
                            <el-color-picker v-model="myChatBubbleColor" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                        <br>
                        <div class="color-show">
                            <span>对方聊天框</span>
                            <el-color-picker v-model="otherChatBubbleColor" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                        <div class="color-show">
                            <span>聊天背景</span>
                            <el-color-picker v-model="chatBackgroundColor" show-alpha :predefine="predefineColors"
                            :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12" style="background-color: black;">
                    <div class="theme-title" style="color: white;">深色模式</div>
                    <el-card class="editor-section" shadow="never" style="color: white;" :style="{'background-color': themeColorNight }">
                        <div class="color-show">
                            <span>主题配色</span>
                            <el-color-picker v-model="themeColorNight" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                        <div class="color-show">
                        <span>本人聊天框</span>
                            <el-color-picker v-model="myChatBubbleColorNight" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                        <br>
                        <div class="color-show">
                        <span>对方聊天框</span>
                            <el-color-picker v-model="otherChatBubbleColorNight" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                        <div class="color-show">
                            <span>聊天背景</span>
                            <el-color-picker v-model="chatBackgroundColorNight" show-alpha :predefine="predefineColors"
                                :disabled="!isEditMode" popper-class="color-picker"></el-color-picker>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="button-row">
                <el-button @click="cancelChanges">返回</el-button>
                <el-button @click="toggleEditMode">{{ isEditMode ? '保存' : '编辑' }}</el-button>
            </el-row>
        </div>
    </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const themeUserColor = computed(() => !store.state.darkTheme ? 'rgb(230,230,230)' : 'rgb(50,50,50)');
const themeContainerColor = computed(() => !store.state.darkTheme ? localStorage.getItem('themeColor') || "rgba(200, 235, 200, 0.3)" : localStorage.getItem('themeColorNight') || "rgba(50, 50, 50, 1)");
const themeFontColor = computed(() => !store.state.darkTheme ? 'black' : 'white');

// 日间
const themeColor = ref(localStorage.getItem('themeColor') || 'rgba(200, 235, 200, .3)');
const myChatBubbleColor = ref(localStorage.getItem('myChatBubbleColor') || '#8bcf8b');
const otherChatBubbleColor = ref(localStorage.getItem('otherChatBubbleColor') || '#f0f0f0');
const chatBackgroundColor = ref(localStorage.getItem('chatBackgroundColor') || '#fafafa');

// 夜间
const themeColorNight = ref(localStorage.getItem('themeColorNight') || 'rgb(50, 50, 50)');
const myChatBubbleColorNight = ref(localStorage.getItem('myChatBubbleColorNight') || '#8bcf8b');
const otherChatBubbleColorNight = ref(localStorage.getItem('otherChatBubbleColorNight') || '#f0f0f0');
const chatBackgroundColorNight = ref(localStorage.getItem('chatBackgroundColorNight') || '#fafafa');

const predefineColors = ['rgba(200, 235, 200, .3)', 'rgb(50, 50, 50)', 'rgb(139, 207, 139)', 'rgb(240, 240, 240)', 'rgb(250, 250, 250)', 'rgb(178, 192, 175)', '#909399', '#DCDFE6'];
const isEditMode = ref(false);

const cancelChanges = () => {
    router.push("/");
};

const toggleEditMode = () => {
    if (isEditMode.value) {
        saveChanges();
    }
    isEditMode.value = !isEditMode.value;
};

const saveChanges = () => {
    localStorage.setItem('themeColor', themeColor.value);
    localStorage.setItem('myChatBubbleColor', myChatBubbleColor.value);
    localStorage.setItem('otherChatBubbleColor', otherChatBubbleColor.value);
    localStorage.setItem('chatBackgroundColor', chatBackgroundColor.value);
    localStorage.setItem('themeColorNight', themeColorNight.value);
    localStorage.setItem('myChatBubbleColorNight', myChatBubbleColorNight.value);
    localStorage.setItem('otherChatBubbleColorNight', otherChatBubbleColorNight.value);
    localStorage.setItem('chatBackgroundColorNight', chatBackgroundColorNight.value);
};
</script>

<style scoped>
.theme-container {
    height: 100%;
}

.theme-header {
    background-color: var(--m-color);
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
}

.custom-style-editor {
    height: 100%;
    padding: 20px;
}

.theme-title {
    text-align: center;
    margin: 5px;
}

.editor-section {
    margin-bottom: 20px;
    border: 0px;
}

.color-show {
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-show span {
    position: absolute;
    z-index: 99;
}

.button-row {
    width: 97%;
    position: absolute;
    bottom: 20px;
    justify-content: space-between;
}

:deep(.el-color-picker__trigger) {
    border: none;
    width: 15vw;
    height: 30vh;
}

:deep(.el-color-picker__mask) {
    background: rgba(0, 0, 0, 0);
}

:deep(.el-color-picker__color) {
    border: 1px solid #ccc;
}

.el-col-12 {
    max-width: 49%;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.el-row {
    justify-content: space-between;
}

:deep(.el-color-picker .el-color-picker__icon) {
    display: none;
}

:deep(.el-card__body) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
</style>